<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div style="width: 29%;vertical-align: middle;height: 28px;" @click="showPicker = true">
        <el-input suffix-icon="el-icon-caret-bottom" :value="timeSet" readonly size="mini" />
      </div>
      <div style="vertical-align: middle;width: 69%;height: 28px;">
        <custom-timer type="date" :start.sync="formInline.startTime" :end.sync="formInline.endTime" title="" style="margin-bottom: 0" @change="onChange" />
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="标题"
        value-key="label"
        show-toolbar
        :columns="shortcutOption"
        :default-index="defaultIndex"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import customTimer from '@/components/common/custom-timer.vue'
import { currentTime, prevTime } from '@/utils/dayJs'

export default {
  name: 'CustomDayjsTimer',
  components: { customTimer },
  props: {
    selectValue: {
      type: String,
      default: '近一天'
    },
    type: {
      // // 默认时间到秒，可传参数 年 / 年月 / 年月日 / 年月日时 / 年月日时分
      type: String,
      default: '年月日'
    },
    start: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    },
    changeLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeSet: '',
      showPicker: false,
      formInline: {
        startTime: '',
        endTime: ''
      },
      defaultIndex: 0,
      shortcutOption: [
        {
          value: 1,
          label: '近一天',
          type: 'day'
        },
        {
          value: 1,
          label: '近一月',
          type: 'month'
        },
        {
          value: 3,
          label: '近三月',
          type: 'month'
        },
        {
          value: 6,
          label: '近半年',
          type: 'month'
        },
        {
          value: 1,
          label: '近一年',
          type: 'year'
        },
        {
          label: '自定义'
        }
      ]
    }
  },
  watch: {
    selectValue(new_) {
      this.timeSet = new_
    }
  },
  mounted() {
    this.timeSet = this.selectValue
    this.formInline.startTime = this.start
    this.formInline.endTime = this.end
    this.defaultIndex = this.shortcutOption.findIndex(val => val.label === this.selectValue)
    const defaultData = this.shortcutOption.find(val => val.label === this.selectValue)
    this.initTime(defaultData)
  },
  methods: {
    onConfirm(data) {
      this.timeSet = data.label
      this.initTime(data)
      this.showPicker = false
    },
    onCancel() {
      this.showPicker = false
    },
    onChange() {
      this.timeSet = '自定义'
      this.emit()
    },
    initTime(data) {
      if (data.label === '自定义') {
        this.formInline.startTime = ''
        this.formInline.endTime = ''
      } else {
        this.formInline.startTime = prevTime(this.type, data.value, data.type, currentTime(data.type))
        this.formInline.endTime = currentTime(this.type)
      }
      this.emit()
    },
    emit() {
      this.$emit('update:start', this.formInline.startTime)
      this.$emit('update:end', this.formInline.endTime)
      if (this.changeLoad) {
        this.$emit('change')
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>
